import './App.css';
import { Component } from 'react';
import Header from './components/header';
import Content from './components/content';
import Footer from './components/footer';
import axios from 'axios';
export default class App extends Component {
  state = {
    todos: [],
  };
  addTodo = todo => {
    const { todos } = this.state;
    todos.unshift(todo);
    this.setState({ todos });
  };
  delItem = (id, done) => {
    if (window.confirm(`确定删除？这是${done ? '已完成的' : '未完成的'}任务`)) {
      const { todos } = this.state;
      this.setState({ todos: todos.filter(item => item.id !== id) });
    }
  };
  changeSelect = (id, done) => {
    const { todos } = this.state;
    this.setState({
      todos: todos.map(item => (item.id === id ? { ...item, done } : item)),
    });
  };
  delAllCompleteTask = () => {
    this.setState({
      todos: this.state.todos.filter(item => !item.done),
    });
  };
  handleAllChange = done => {
    this.setState({
      todos: this.state.todos.map(item => ({ ...item, done })),
    });
  };
  getData = async () => {
    const { data: aaa } = await axios.get('/testapi');
    console.log(aaa);
  };
  render() {
    const { todos } = this.state;
    return (
      <div className='App'>
        <Header addTodo={this.addTodo} />
        <Content todos={todos} delItem={this.delItem} changeSelect={this.changeSelect} />
        <Footer todos={todos} delAllCompleteTask={this.delAllCompleteTask} handleAllChange={this.handleAllChange} />
        <button onClick={this.getData}>点我发送请求</button>
      </div>
    );
  }
}
